<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Tab选项卡</title>
		<script src="Vue.js"></script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			#app{
				width:600px;
				height:500px;
				margin:50px auto;
				padding:20px;
				box-shadow:10px 20px 20px 10px gray;
			}
			ul{
				list-style:none;
				width:50%;
				height:50px;
				display:flex;
			}
			ul li{
				height:50px;
				border:1px solid black;
				border-bottom:none;
				line-height:50px;
				text-align:center;
				cursor:pointer;
				margin:0 5px;
				flex:1;
			}
			#app div{
				width:600px;
				height:300px;
				border:2px solid blue;
				overflow:hidden;
				display:none;
			}
			#app div img{
				width:600px;
				height:300px;
				display:block; 
			}
			.current{
				display:block!important;
			}
			.active{
				background-color:orange;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li @click="change(index)" :class="currentIndex==index ? 'active' : '' " :key="data.id" v-for="(data,index) in datalist">
					{{data.title}}
				</li>
			</ul>
			<div :class="currentIndex==index ? 'current' : '' " :key="data.id" v-for="(data,index) in datalist">
				<img :src="data.path" alt="图片加载失败!" >
			</div>
		</div>
		
		<script>
			let vm = new Vue({
				el:"#app",
				data:{
					currentIndex:0,//选项卡当前的索引
					datalist:[
						{
						  id:1,
						  title:"图片1",
						  path:"image/pic-1.jpg"
						},
						{
						  id:2,
						  title:"图片2",
						  path:"image/pic-2.jpg"
						},
						{
						  id:3,
						  title:"图片3",
						  path:"image/pic-3.jpg"
						},
					]
				},
				methods:{
					change:function(index){
						//在这里实现选项卡切换操作:本质操作类名
						//如何操作类名？就是通过currentIndex
						this.currentIndex = index;
					}
				}
			})
		</script>
	</body>
</html>
